var menu = document.querySelector('.menu');
var goodsBox = document.querySelector('.goodsBox');
//2.根据数组渲染标题
var frg = document.createDocumentFragment();
dataList.forEach(function(item) {
    var li = document.createElement('li');
    li.innerHTML = item.name;
    frg.appendChild(li);
    //
    li.dataset.id = item.id
});
menu.appendChild(frg);
//
var lis = menu.querySelectorAll('li');
console.log(lis);
var phone_list = document.querySelector('.phone_list')
var div = document.querySelector('.menu_list')
lis.forEach(function(item) {
    item.onmouseover = function() {
        div.style.display = 'block';
        var id = this.dataset.id - 0;
        var secondsList = dataList.find(function(item) {
            return item.id === id
        });
        var str = '';
        secondsList.list.forEach(function(item) {
            str += `
                        <div>
                            <li>
                                <img src="${item.list_url}" alt="">
                                <span>${item.list_name}</span>
                            </li>
                        </div>
                `
        })
        goodsBox.innerHTML = str;
    };
    phone_list.onmouseleave = function() {
        goodsBox.innerHTML = null;
        div.style.display = 'none'
    }
});